<template>
  <div>

    <el-card>
      <el-form ref="form" :inline="true" :model="query">
        <el-form-item label="用户名称" prop="username">
          <el-input v-model="query.username" />
        </el-form-item>
        <el-form-item label="用户邮箱" prop="email">
          <el-input v-model="query.email" />
        </el-form-item>
        <el-form-item label="角色" prop="role_id">
          <el-select v-model="query.role_id">
            <el-option label="超级管理员" value="1" />
            <el-option label="管理员" value="2" />
            <el-option label="老师" value="3" />
            <el-option label="学生" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button @click="reset">清除</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-table :data="list">

        <el-table-column label="序号" type="index" />
        <el-table-column prop="username" label="用户名" />
        <el-table-column prop="phone" label="电话" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="role" label="角色" />
        <el-table-column prop="remark" label="备注" />
        <el-table-column prop="status" label="状态">
          <template v-slot="{row}">
            <div :style="{color:row.status===1?'#000':'#f00'}">
              {{ row.status | formatStatus(xxx) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <el-button type="text">编辑</el-button>
          <el-button type="text">启用</el-button>
          <el-button type="text">删除</el-button>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          :current-page.sync="page.page"
          :page-sizes="[1,5,10,100, 200, 300, 400]"
          :page-size.sync="page.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="getData(false)"
          @current-change="getData(false)"
        />
      </div>
    </el-card>

  </div>
</template>
<script>
import { userList } from '@/api/test'
import loadsh from 'loadsh'
import xxx from '@/api/xxx'
export default {
  filters: {
    formatStatus(status, obj) {
      const findItem = obj.status.find(item => item.value === status)
      return findItem ? findItem.name : '-'
    }
  },
  data() {
    return {
      xxx,
      list: [],
      query: {
        username: '', //	否	string	昵称
        email: '', //	否	string	邮箱
        role_id: '' //	否	string	角色数字1:超级管理员 2管理员、3老师、 4学生
      },
      page: {
        page: 1,
        limit: 10
      },
      form: {},
      total: 400
    }
  },
  created() {
    this.getData()
  },
  methods: {
    search() {
      this.page.page = 1
      this.getData()
    },
    async  getData(bol = true) {
      if (bol) {
        // 搜索时获取相应表单的值到form
        // this.form = JSON.parse(JSON.stringify(this.query))
        this.form = loadsh.cloneDeep(this.query)
      } else {
        // 表单数据还原
        this.query = JSON.parse(JSON.stringify(this.form))
      }
      const res = await userList({ ...this.form, ...this.page })
      this.list = res.data.data.items
      this.total = res.data.data.pagination.total
      console.log(res)
    },
    reset() {
    //   this.query = {
    //     username: '', //	否	string	昵称
    //     email: '', //	否	string	邮箱
    //     role_id: '', //	否	string	角色数字1:超级管理员 2管理员、3老师、 4学生
    //     page: 1, //	否	string	页码 默认为1
    //     limit: 10 //	否	string	页尺寸 默认为10
    //   }
      this.$refs.form.resetFields()
      this.page.page = 1
      this.getData()
    }
  }
}
</script>
<style>
</style>
